<template>
  <div class="WdPictureadsStyle">
    <el-form :model="$store.state.$currentproperties" ref="vForm" :rules="rules" class="lef" label-position="left"
      label-width="80px" size="small">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="基本属性" name="1">
          <el-form-item label="轮播类型" prop="swiperType">
            <el-radio-group v-model="$store.state.$currentproperties.swiperType">
              <el-radio :value="0">单图展示</el-radio>
              <el-radio :value="1">轮播图</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <el-form-item label="图片倒角" prop="borderRadius">
            <el-input-number v-model="$store.state.$currentproperties.borderRadius" 
              :min="0" :max="100" controls-position="right"></el-input-number>
          </el-form-item>

          <el-form-item label="页面边距" prop="pageMargin">
            <el-input-number v-model="$store.state.$currentproperties.pageMargin" 
              :min="0" :max="100" controls-position="right"></el-input-number>
          </el-form-item>

          <el-form-item label="图片边距" prop="imageMargin">
            <el-input-number v-model="$store.state.$currentproperties.imageMargin" 
              :min="0" :max="100" controls-position="right"></el-input-number>
          </el-form-item>
        </el-collapse-item>

        <el-collapse-item title="轮播设置" name="2" v-if="$store.state.$currentproperties.swiperType === 1">
          <el-form-item label="自动播放间隔" prop="autoplay">
            <el-input-number v-model="$store.state.$currentproperties.swiperItemProps.autoplay" 
              :min="0" :max="10000" controls-position="right"></el-input-number>
          </el-form-item>

          <el-form-item label="动画时长" prop="duration">
            <el-input-number v-model="$store.state.$currentproperties.swiperItemProps.duration" 
              :min="0" :max="5000" controls-position="right"></el-input-number>
          </el-form-item>

          <el-form-item label="循环播放" prop="loop">
            <el-switch v-model="$store.state.$currentproperties.swiperItemProps.loop"></el-switch>
          </el-form-item>

          <el-form-item label="显示指示器" prop="showIndicators">
            <el-switch v-model="$store.state.$currentproperties.swiperItemProps.showIndicators"></el-switch>
          </el-form-item>

          <el-form-item label="指示器颜色" prop="indicatorColor">
            <el-color-picker v-model="$store.state.$currentproperties.swiperItemProps.indicatorColor"></el-color-picker>
          </el-form-item>
        </el-collapse-item>

        <el-collapse-item title="图片管理" name="3">
            <draggable v-model="$store.state.$currentproperties.imageList" 
            style="background: #f7f8fa; padding:5px" animation="300" ghostClass="ghostClass"
            item-key="image-item">
            <template #item="{index}">
              <div style="margin-bottom: 10px">
                <van-cell-group>
                  <van-cell is-link>
                    <template #title>
                      <div style="font-weight: bold">
                        <span>图片 {{index + 1}}</span>
                      </div>
                    </template>
                    <template #default>
                      <div>
                        <el-button type="primary" size="small" link @click="editImage(index)">编辑</el-button>
                        <el-button type="primary" size="small" link @click="deleteImage(index)">删除</el-button>
                      </div>
                    </template>
                  </van-cell>
                </van-cell-group>
              </div>
            </template>
          </draggable>

          <div style="margin: 10px">
            <el-button size="large" style="width: 100%" type="primary" icon="plus" @click="addImage">添加图片</el-button>
          </div>
        </el-collapse-item>

        <el-collapse-item title="高级设置" name="4">
          <el-form-item label="节点样式" prop="customClass">
            <el-input v-model="$store.state.$currentproperties.Advanced.customClass"></el-input>
          </el-form-item>
          <el-form-item label="内容样式" prop="contentClass">
            <el-input v-model="$store.state.$currentproperties.Advanced.contentClass"></el-input>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'WdPictureadsStyle',
  components: {
    draggable
  },
  data() {
    return {
      activeNames: ['1', '2', '3', '4'],
      rules: {}
    }
  },
  methods: {
    addImage() {
      if (!this.$store.state.$currentproperties) {
        this.$store.state.$currentproperties = {
          swiperType: 0,
          borderRadius: 0,
          pageMargin: 0,
          imageMargin: 0,
          imageList: [],
          swiperItemProps: {
            autoplay: 3000,
            duration: 500,
            loop: true,
            showIndicators: true,
            indicatorColor: '#1989fa'
          },
          Advanced: {
            customClass: '',
            contentClass: ''
          }
        }
      }
      if (!this.$store.state.$currentproperties.imageList) {
        this.$store.state.$currentproperties.imageList = []
      }
      this.$store.state.$currentproperties.imageList.push({
        src: '',
        text: ''
      })
    },
    editImage(index) {
      // 编辑图片逻辑
    },
    deleteImage(index) {
      this.$confirm('确定删除此图片吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.state.$currentproperties.imageList.splice(index, 1)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.WdPictureadsStyle {
  .lef {
    ::v-deep .el-form-item__label {
      text-align: left;
    }
  }
  
  .ghostClass {
    background-color: #f0f7ff !important;
  }
}
</style>
